import React, { Component } from "react";
import { Carousel, Card, Row, Col } from "antd";
import { NavLink } from "react-router-dom";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Tab1 from "./tab/tab1";
import axios from "axios";
const { Meta } = Card;
export default class Home extends Component {
  componentDidMount() {
    this.props.getBanner();
    this.props.getHot();
  }
  setBanner(arr) {
    return (
      <Carousel autoplay style={{ width: "100%" }}>
        {arr.map((value, index) => {
          return <Child key={index} {...value} />;
        })}
      </Carousel>
    );
  }
  axiosed = () => {
    console.log(123);
    axios({
      url   : "http://742897633.applinzi.com/php/getSign.php?url="+window.location.href,
      method: "get",

    }).then(res => {
      var res    = res.data;
      var pos    = res.indexOf('<script type="text/javascript">');
      var str    = res.substring(0, pos);
      var strObj = JSON.parse(str);
      console.log(strObj)
      wx.config({
        debug    : true,
        appId    : strObj.appId,
        timestamp: strObj.timestamp,
        nonceStr : strObj.nonceStr,
        signature: strObj.signature,
        jsApiList: [
          // 所有要调用的 API 都要加到这个列表中
          "scanQRCode"
        ]
      });
      wx.ready(function() {
        // 在这里调用 API
        wx.scanQRCode({
          needResult: 0,                       // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType  : ["qrCode", "barCode"],   // 可以指定扫二维码还是一维码，默认二者都有
          success   : function(res) {
            var result = res.resultStr;  // 当needResult 为 1 时，扫码返回的结果
          }
        });
      });
    });
  };
  setHot(arr) {
    var arr1 = arr.slice(0, 3);
    return (
      <div>
        <Row>
          <Col span={3} style={{ height: "10px" }} />
          {arr1.map((value, index) => {
            return <ChildCard {...value} key={index} onClick={this.axiosed} />;
          })}
        </Row>
      </div>
    );
  }
  render() {
    const { boo, banner, hot } = this.props;
    if (boo) {
      return (
        <div id="home">
          <div style={{ width: "100%" }}>
            {this.setBanner(banner)}
            <h2 style={{ textAlign: "center" }}>明星产品</h2>
            {this.setHot(hot)}
            <h2 style={{ textAlign: "center" }}>火热产品</h2>
            <button onClick={()=>{this.axiosed()}}>二维码扫描</button>
            <div>
              <ul>
                <li>
                  <NavLink to={this.props.match.url + "7"}>leval1</NavLink>
                </li>
                <li>
                  <NavLink to={this.props.match.url + "8"}>leval2</NavLink>
                </li>
                <li>
                  <NavLink to={this.props.match.url + "9"}>leval3</NavLink>
                </li>
              </ul>
              <Route path={`${this.props.match.url}:id`} component={Tab1} />
            </div>
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <NavLink to="/login">请先登录！</NavLink>
        </div>
      );
    }
  }
}
const ChildCard = value => {
  console.log("value", value);
  var imgUrl = "http://www.yuesai.com" + value.image;
  return (
    <Col span={6}>
      {" "}
      <div style={{ display: "inline-block", marginLeft: "37px" }}>
        <Card
          hoverable
          style = {{ width: 300, height: "400px", position: "relative" }}
          cover = {
            <img
              alt   = "example"
              src   = {imgUrl}
              style = {{
                width   : "80%",
                position: "absolute",
                left    : "0",
                top     : "0",
                right   : "0",
                bottom  : "0",
                margin  : "auto"
              }}
            />
          }
          onClick={() => {
            value.onClick();
          }}
        >
          <Meta
            title = {value.title}
            style = {{ position: "absolute", bottom: "10px" }}
          />
        </Card>
      </div>
    </Col>
  );
};

const Child = value => {
  var productUrl = "/product/" + value.id;
  var imgUrl     = "http://116.62.215.63/shop" + value.pic;
  return (
    <div>
      <h3>
        <NavLink
          to    = {productUrl}
          style = {{ width: "100%", display: "inline-block" }}
        >
          <img
            src   = {imgUrl}
            style = {{
              width : "100%",
              margin: "0 auto"
            }}
          />
        </NavLink>
      </h3>
    </div>
  );
};
